import { useState } from "react";
import {
  Layout,
  Input,
  Modal,
  Menu,
  ConfigProvider,
  Avatar,
  Badge,
} from "antd";
import type { MenuProps } from "antd";
import "./index.scss";
import { Link, Outlet, useNavigate } from "react-router-dom";
// import * as Icons from '@ant-design/icons'
import {
  PoweroffOutlined,
  ProfileOutlined,
  AlertOutlined,
  BellOutlined,
} from "@ant-design/icons";

import zhCN from "antd/locale/zh_CN";

const { Header, Sider, Content } = Layout;

const rootSubmenuKeys = ["item-1", "item-2", "item-3", "item-4", "item-5"];
// type MenuItem = Required<MenuProps>["items"][number];

const menuContent = [
  {
    label: <Link to={"/home"}>主页面</Link>,
    key: "item-1",
    icon: <ProfileOutlined />,
  },
  {
    label: <Link to={"/home/alter"}>报警事件</Link>,
    key: "item-2",
    icon: <ProfileOutlined />,
  },
  {
    label: "设备管理",
    key: "item-3",
    icon: <ProfileOutlined />,
    children: [
      {
        label: <Link to={"/home/eqAdmin"}>阵列探测器</Link>,
        key: "submenu-item-1",
      },
      {
        label: <Link to={"/home/eqAdmin"}>编码孔相机</Link>,
        key: "submenu-item-2",
      },
      {
        label: <Link to={"/home/eqAdmin"}>光学相机</Link>,
        key: "submenu-item-3",
      },
      {
        label: <Link to={"/home/eqAdmin"}>云台</Link>,
        key: "submenu-item-4",
      },
    ],
  },
  {
    label: <Link to={"/home/vdData"}>录像管理</Link>,
    key: "item-4",
    icon: <ProfileOutlined />,
  },
  {
    label: <Link to={"/home/userWM"}>用户管理</Link>,
    key: "item-5",
    icon: <ProfileOutlined />,
  },
];

const Home = () => {
  const url =
    "https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg";
  const navigate = useNavigate();
  const close = () => {
    navigate("/login", { replace: true });
  };

  const [openKeys, setOpenKeys] = useState(["item-1"]);

  // 设置
  const [modal1Open, setModal1Open] = useState(false);

  // 导航菜单只展开当前
  const onOpenChange: MenuProps["onOpenChange"] = (keys) => {
    const latestOpenKey = keys.find((key) => openKeys.indexOf(key) === -1);
    if (rootSubmenuKeys.indexOf(latestOpenKey!) === -1) {
      setOpenKeys(keys);
    } else {
      setOpenKeys(latestOpenKey ? [latestOpenKey] : []);
    }
  };

  return (
    <Layout className="home">
      <Header className="header">
        <h1>
          智能化高灵敏核辐射成像装备
          <AlertOutlined />
        </h1>
        <div className="header-right">
          <div className="alter-box">
            <a href="#">
              {/* <Avatar shape="square" size="large" icon={<BellOutlined />} /> */}
              {/* <Avatar shape="square" size="large" src={url} /> */}
              <div className="alter-box-it">
                <div className="alter-badge">
                  <span style={{fontSize:"14px"}}>14</span>
                </div>
                <BellOutlined style={{ fontSize: 24 }} />
              </div>
            </a>
          </div>
          <span className="user" onClick={() => setModal1Open(true)}>
            你好！系统管理员
          </span>
          <PoweroffOutlined onClick={close} className="icon" />
          注销
        </div>
        <Modal
          style={{ top: 65, right: -563 }}
          width={250}
          closable={false}
          open={modal1Open}
          onOk={() => setModal1Open(false)}
          onCancel={() => setModal1Open(false)}
        >
          <p>设置密码：</p>
          <Input allowClear />
        </Modal>
      </Header>
      <Layout>
        <Sider className="sider" width="256">

          <Menu
            style={{
              width: "256px",
              background:
                "#48512c",
              border: "none",
              color: "#eee",
            }}
            defaultSelectedKeys={["item-1"]}
            mode="inline"
            items={menuContent}
            openKeys={openKeys}
            onOpenChange={onOpenChange}
          />
        </Sider>
        <Content className="content">
          <ConfigProvider locale={zhCN}>
            <Outlet />
          </ConfigProvider>
        </Content>
      </Layout>
    </Layout>
  );
};
export default Home;
